<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import api from '@/api'
export default {
  name: 'App',
  props: {},
  components: {},
  data() { return {} },
  computed: {
    ...mapGetters({
      defaultParams: 'global/getDefaultParams',
      connections: 'global/getConnections'
    })
  },
  watch: {},
  methods: {
    async initDefaultConnectionParams() {
      const resp = await api.connection.getDefaultConnectionParams()
      if (resp.ok) {
        const data = resp.data ?? []
        const map = new Map()
        const defaultParams = JSON.parse(JSON.stringify(this.defaultParams))
        for (const param of defaultParams) {
          map.set(param.name, param.value)
        }
        for (const param of data) {
          map.set(param.name, param.value)
        }
        const params = []
        for (const [name, value] of map.entries()) {
          params.push({ name, value })
        }
        this.setDefaultParams(params)
      }
    },
    async initConnections() {
      const resp = await api.connection.getAllConnection()
      if (resp.ok) {
        const data = resp.data ?? []
        this.setConnections(data)
      }
    },
    ...mapActions({
      setDefaultParams: 'global/setDefaultParams',
      setConnections: 'global/setConnections'
    })
  },
  beforeCreate() {
    const theme = localStorage.getItem('data-theme')
    if (theme && ['light', 'dark'].includes(theme)) {
      document.documentElement.setAttribute('data-theme', theme)
    }
  },
  async created() {
    await this.initDefaultConnectionParams()
    await this.initConnections()
  },
  beforeDestroy() { },
  destroyed() { }
}
</script>

<style lang="scss">
@use './assets/scss/var.scss' as *;

#nprogress {
  .bar {
    height: 1px !important;

    @include useTheme {
      background-color: getVar('primary-color') !important;
    }

  }
}
</style>
